<template>
  <div class="article-detail">
    <div class="header">
      <div class="title">{{ articleDetail.title }}</div>
      <div class="view-count">
        <div>阅读量：{{ articleDetail.view_count }}</div>
      </div>
    </div>
    <div class="content" v-html="articleDetail.html_content"></div>
  </div>
</template>

<script>
import { getArticleDetail } from "@/request/article";

export default {
  data(){
    return {
      articleDetail: {}
    }
  },
  mounted(){
    this.getArticleDetail();
  },
  methods:{
    async getArticleDetail(){
      const id = this.$route.params.id;
      const res = await getArticleDetail(id);
      if(res?.code == 200){
        this.articleDetail = res?.data || {}
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.article-detail{
  width: 100%;
  height: 100%;
  .header{
    width: 100%;
    height: 100px;
    background-color: #f5f5f5;
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .view-count{
      font-size: 16px;
      color: #e72626;
    }
  }
  .content{
    width: 100%;
    height: 100%;
  }
}
</style>

  
